<script setup>
import LfButton from '@/components/commonUI/LfButton.vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
import CloseIcon from '../svgComponents/CloseIcon.vue'

defineProps({
  title: {
    type: String,
  },
  isShow: Boolean,
  width: {
    type: String,
    default: '550px',
  },
  height: {
    type: String,
    default: '700px',
  },
  class: {
    type: String,
    default: '',
  }
})

const emit = defineEmits(['close', 'ok'])
</script>

<template>
  <TransitionRoot appear :show="isShow" as="template">
    <Dialog as="div" @close="emit('close')" class="relative z-20" :class="class">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0">
        <div class="fixed inset-0 bg-black/25" />
      </TransitionChild>

      <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4 text-center">
          <TransitionChild
            as="template"
            enter="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95">
            <DialogPanel
              :style="{ width: width, height: height }"
              class="transform overflow-hidden rounded-xl bg-[--surface-0] text-left align-middle shadow-xl transition-all overflow-y-auto">
              <div v-if="title" class="p-3 flex flex-col justify-between h-full">
                <header class="text-lg font-bold flex justify-between items-center">
                  <div>{{ title }}</div>
                  <LfButton @click="emit('close')" icon type="primary" size="small"><CloseIcon /></LfButton>
                </header>

                <slot></slot>

                <footer class="flex justify-end gap-2">
                  <LfButton type="secondary" @click="emit('close')">取消</LfButton>
                  <LfButton type="primary" @click="emit('ok')">确定</LfButton>
                </footer>
              </div>

              <slot v-else></slot>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>
